<template>
<div class="wrapper">
<!-- header部分 -->
<header>
<p>在线支付</p>
</header>

<!-- 订单信息部分 -->
<h3>订单信息：</h3>
<div class="order-info">
<p v-if="orders.business">
{{orders.business.businessName}}
<i class="fa fa-caret-down" @click="detailetShow"></i>
</p>
<p> &#165;{{orders.orderTotal}}</p>
</div>

<!-- 订单明细部分 -->
<ul class="order-detailet" v-show="isShowDetailet">
<li v-for="item in orders.list" :key="item.odId">
<p> {{item.food.foodName}} x {{item.quantity}}</p>
<p> &#165;{{item.food.foodPrice*item.quantity}}</p>
</li>
<li v-if="orders.business">
<p>配送费</p>
<p> &#165;{{orders.business.deliveryPrice}}</p>
</li>
</ul>

<!-- 支付方式部分 -->
<ul class="payment-type">
<li>
<img src= "@/assets/alipay.png">
<i class="fa fa-check-circle"></i>
</li>
<li>
<img src= "@/assets/wechat.png">
</li>
</ul>
<div class="payment-button">
<button>确认支付</button>
</div>

<!-- 底部菜单部分 -->
<Footer></Footer>
</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
name: 'Payment',
data(){
return {
orderId:this.$route.query.orderId,
orders:{
business:{} // Ensure business object exists
},
isShowDetailet:false
}
},
created() {
this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
orderId:this.orderId
})).then(response=>{
this.orders = response.data;
}).catch(error=>{
console.error(error);
});
},
mounted() {
//这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
//先将当前url添加到history对象中
history.pushState(null,null,document.URL);
//popstate事件能够监听history对象的变化
window.onpopstate = () => {
this.$router.push({path:'/index'});
}
},
unmounted() {
window.onpopstate = null;
},
methods:{
detailetShow(){
this.isShowDetailet = !this.isShowDetailet;
}
},
components: {
Footer
}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
width: 100%;
height: 100%;
padding-bottom: 14vw; /* To avoid overlap with footer */
box-sizing: border-box;
}

/****************** header部分 ******************/
.wrapper header {
width: 100%;
height: 12vw;
background-color: #0097FF;
color: #fff;
font-size: 4.8vw;

position: fixed;
left: 0;
top: 0;
z-index: 1000;

display: flex;
justify-content: center;
align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3 {
margin-top: 12vw;
box-sizing: border-box;
padding: 4vw 4vw 0;
font-size: 4vw;
font-weight: 300;
color: #999;
}

.wrapper .order-info {
box-sizing: border-box;
padding: 4vw;
font-size: 4vw;
color: #666;
display: flex;
justify-content: space-between;
align-items: center;
}

.wrapper .order-info p:last-child {
color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet {
width: 100%;
}

.wrapper .order-detailet li {
width: 100%;
box-sizing: border-box;
padding: 1vw 4vw;
display: flex;
justify-content: space-between;
align-items: center;
}

.wrapper .order-detailet li p {
font-size: 3vw;
color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type {
width: 100%;
}

.wrapper .payment-type li {
width: 100%;
box-sizing: border-box;
padding: 4vw;
display: flex;
justify-content: space-between;
align-items: center;
}

.wrapper .payment-type li img {
width: 33vw;
height: 8.9vw;
}

.wrapper .payment-type li .fa-check-circle {
font-size: 5vw;
color: #38CA73;
}

.wrapper .payment-button {
width: 100%;
box-sizing: border-box;
padding: 4vw;
}

.wrapper .payment-button button {
width: 100%;
height: 10vw;
border: none;
/*去掉外轮廓线*/
outline: none;
border-radius: 4px;
background-color: #38CA73;
color: #fff;
}
</style>
